<template>
  <div class="container">
    <div class="switch">
      <el-switch
        v-model="chart.xType"
        active-color="#13ce66"
        active-text="公里标"
        active-value="公里标"
        inactive-color="#13ce66"
        inactive-text="时间"
        inactive-value="时间"
      />
    </div>
    <div class="chart-content">
      <div
        class="chart"
        ref="chart"
      />
      <div
        class="mark"
      >
        <div
          :style="handleStyle"
          class="box"
        >
          <div
            v-for="n in xNumber + 1"
            :key="n"
            draggable="true"
            style="position: relative; "
            @dragstart="handleDragStart($event, n)"
            @dragover.prevent="handleDragOver($event, n)"
            @dragenter="handleDragEnter($event, n)"
            @dragend="handleDragEnd($event, n)"
          >
            <div
              v-if="n === currentPoint + 1"
              style="position: absolute; height: 100%; display: flex; justify-content: center; z-index: 1; width: 0;"
            >
              <div style="position: relative; height: 100%; width: 1px; border: 1px solid rgb(221, 97, 97)" />
              <img
                style="width: 45px; height: 45px; position: absolute; bottom: 15%; left: -45px;"
                :src="pointIcon"
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts, { ECharts, EChartOption, EChartsConvertFinder } from 'echarts'
import IdxECharts from './options'
// import { AppModule } from '@/store/modules/app'
export default {
  data(){
    return{
      pointIcon: require('@/assets/carw.png'),
      chart: {},
      xNumber: this.chart.xNumber || 0,
      width: this.chart.width || 0,
      height: this.chart.height || 0,
      currentIndex: this.index - this.currentPoint,
      isCollapse: !AppModule.sidebar.opened
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    index: {
      type: Number,
      default: 0
    },
    phases: {
      type: Array,
      default() {
        return []
      }
    },
    limitSpeeds: {
      type: Array,
      default() {
        return []
      }
    },
    idx: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    handleStyle(){
      let style = {}
      style = {
        width: this.width + 'px',
        height: this.height + 'px',
        zIndex: 2
      }
      return style
    },
    xNumber(value) {
      this.chart.xNumber = value
    },
    currentPoint() {
      const maxPoint = 10
      const lastMaxPoint = this.xNumber - maxPoint - 1
      const lastPoint = this.list.length - this.index - 2
      if (this.index <= maxPoint) {
        return this.index
      } else if (lastPoint <= lastMaxPoint) {
        return this.xNumber - lastPoint - 1
      }
      return maxPoint
    },
    onIndexChange() {
    this.chart.list = this.list || []
    this.chart.phases = this.phases || []
    this.chart.limitSpeeds = this.limitSpeeds || []
    this.chart.idx = this.idx || {}
    this.chart.index = this.currentIndex
  },
  setLoading(value) {
    this.chart.loading = value
  },
  initChart($el) {
    this.chart = new IdxECharts($el, this.list, this.index, this.limitSpeeds, this.phases, this.chartClick)
  },
  chartClick(index) {
    return index
  }
  },
  mounted() {
    this.initChart(this.$refs.chart)
  },
  Watch: {
    'index'(newV, oldV){
      console.log(newV, oldV)
    },
    'chart'(newV, oldV){
      console.log(newV, oldV)
    },
    'phases'(newV, oldV){
      console.log(newV, oldV)
    },
    'limitSpeeds'(newV, oldV){
      console.log(newV, oldV)
    },
    'idx'(newV, oldV){
      console.log(newV, oldV)
    },
    'isCollapse'(newV, oldV){
      // resize() {
      //   window.setTimeout(() => {
      //     this.chart.resize()
      //   }, 500)
      // }
    }
  }
}
</script>

<style scoped>
.container  .switch {
    height: 20px;
    color: white;
    text-align: right;
  }
  /deep/ .el-switch__label {
    color: white;
  }
  /deep/ .el-switch__label.is-active {
    color: #00EE00;
  }
.container {
  height: 100%;
  width: 100%;
  position: relative;
}
 .container .chart-content {
    position: relative;
    height: calc(100% - 20px);
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .container .chart-content .chart {
    height: 100%;
    width: 100%;
    z-index: 9;
  }
  .container .chart-content  .mark {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 0.2rem;
  }
  .container .chart-content  .mark  .box {
    display: flex;
    justify-content: space-between;
    z-index: 0;
  }
</style>
